<template>
  <footer>
    <div class="block"></div>
    <div class="rule-footer">
      <div class="left-input">
        <span class="left-label">任务规则名:</span>
        <el-input type="text" size="mini"></el-input>
      </div>
      <div class="right-btn">
        <el-button type="primary" size="mini" icon="el-icon-save">保存</el-button>
        <el-button type="success" size="mini" icon="el-icon-save">保存并退出</el-button>
      </div>
    </div>
  </footer>
</template>
<script>
export default {
  name: 'RuleFooter'
}
</script>
<style lang="scss" scoped>
footer {
  .block {
    height: 50px;
  }
}
.rule-footer {
  position: fixed;
  bottom: 0;
  width: calc(100vw - 237px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-top: 1px dashed;
  background: #fff;
  z-index: 99999;
  .left-input {
    display: flex;
    .left-label {
      width: 120px;
      line-height: 2;
    }
  }
}
</style>
